<template>
  <div class="box">
    <el-container height="80px" class="yes">
      <el-header>
        <el-row class="button">
          <el-button type="primary" class="tto" @click="showDialog = true">新增公告</el-button>
          <el-button type="danger" class="tto" @click="shanchu">全部删除</el-button>
          <span>请选择发布小区</span>
          <el-select v-model="reulst.communityId" placeholder="请选择分布小区" style="width:180px;">
            <el-option v-for="item in loupan" :key="item.id" :label="item.communityName" :value="item.communityId" />
          </el-select>
          <span>请选择展示类型</span>
          <el-select v-model="reulst.type" placeholder="请选择展示类型" style="width:180px;">
            <el-option label="富文本" :value="1" />
            <el-option label="外链" :value="0" />
          </el-select>
          <span>公告类型</span>
          <el-select v-model="reulst.showType" placeholder="公告类型" style="width:180px;">
            <el-option label="社区公告" :value="0" />
            <el-option label="跳蚤市场公告" :value="1" />
            <el-option label="小区商城公告" :value="2" />
          </el-select>
        </el-row>
        <el-row class="button">
          <!-- <span>请选择推送状态</span> -->
          <el-input v-model="reulst.keyWords" label="请输入公告标题" style="width:150px;" placeholder="请输入公告标题" />
          <el-button type="info" @click="chaxun">搜索</el-button>
        </el-row>
      </el-header>
      <el-main>
        <!-- 组件 -->
        <div class="no">
          <div class="kehudua">公告管理</div>
          <el-table border :data="tableData">
            <el-table-column label="序号" :show-overflow-tooltip="true" type="index" />
            <el-table-column label="社区名称" prop="name" />
            <el-table-column label="公告标题" align="center" prop="title" />
            <el-table-column label="封面图" prop="imageUrl">
              <template v-slot="{row}">
                <el-image :src="row.imageUrl" alt="" class="imgages" />
              </template>
            </el-table-column>
            <el-table-column label="公告类型" prop="showType">
              <template v-slot="{row}">
                <span>{{ row.showType===1?'跳蚤市场公告':'社区公告' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="展现类型" prop="type">
              <template v-slot="{row}">
                <span>{{ row.type===1?'富文本':'外链' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="链接地址" align="center" prop="linkUrl" />
            <el-table-column label="操作" fixed="right" width="280" class="yes">
              <template v-slot="{row}">
                <el-button type="primary" class="yes2" @click="xiugai(row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
    <!-- <guanLi :show-dialog.sync="showDialog" @jiao="jiao" /> -->
    <el-dialog :visible="showDialog" @close="quxiao">
      <el-form ref="formdata" label-width="120px" :model="formData" :rules="rules">
        <el-form-item label="公告名称" prop="name">
          <el-input v-model="formData.title" style="width:50%" placeholder="请输入社区名称" />
        </el-form-item>
        <el-form-item label="发布社区" prop="showType">
          <el-select v-model="formData.communityId" style="width:50%" placeholder="请选择公告类型">
            <el-option v-for="item in loupan" :key="item.communityId" :value="item.communityId" :label="item.communityName" />
          </el-select>
        </el-form-item>
        <el-form-item label="公告类型" prop="showType">
          <el-select v-model="formData.type" style="width:50%" placeholder="请选择公告类型">
            <el-option v-for="item in type" :key="item.type" :value="item.type" :label="l=item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="展现类型" prop="type">
          <el-radio v-model="formData.showType" label="0">外链</el-radio>
          <el-radio v-model="formData.showType" label="1">富文本</el-radio>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="quxiao">取消</el-button>
          <el-button type="primary" size="small" @click="queding">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// import guanLi from '@/views/app/guanli'
import { getAnnouncement, loupanxin, addAnnouncement } from '@/api/advertising'
export default {
  components: {
    // guanLi
  },
  data() {
    return {
      showDialog: false,
      tableData: [],
      reulst: {
        pageIndex: 1,
        pageSize: 10,
        communityId: '',
        type: '',
        showType: ''
        // keyWords: ''
      },
      loupan: [],
      formData: {
        content: '',
        id: 13,
        title: '',
        imageUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660821576&t=d4266e4cf047d29bad801b90d5b50d33',
        showType: '',
        communityId: [],
        type: '',
        linkUrl: ''
      },
      type: [{ type: '1', value: '社区公告' }, { type: '2', value: '社区2公告' }, { type: '3', value: '社区3公告' }],
      rules: {
        title: [{ required: true, message: '广告名称不能为空', trigger: 'blur' }],
        imageUrl: [{ required: true, message: '封面图不能', trigger: 'blur' }],
        showFlag: [{ required: true, message: '客户端不能为空', trigger: 'blur' }],
        showType: [{ required: true, message: '首页显示形式不能为空', trigger: 'blur' }],
        pushStatus: [{ required: true, message: '推送形式不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        linkUrl: [{ required: true, message: '类型不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getAnnouncement()
    this.loupanxin()
  },
  methods: {
    async  getAnnouncement() {
      try {
        const { data } = await getAnnouncement(this.reulst)
        // console.log(yes)
        this.tableData = data
        // console.log(1111);
        // console.log(this.tableData)
      } catch (err) {
        console.log(err)
      }
    },
    // 取消
    quxiao() {
      // console.log(1)
      this.showDialog = false
      this.formData = {
        name: '',
        title: '',
        imageUrl: '',
        showType: '',
        pushStatus: '',
        type: '',
        linkUrl: ''
      }
    },
    // 确定
    async  queding() {
      // console.log(1)
      try {
        if (await this.$refs.formdata.validate() === false) return
        this.$message.success('校验成功')
        await addAnnouncement(this.formData)
        this.showDialog = false
        // this.tableData.push(this.formData)
        // this.getAnnouncement()
      } catch (err) {
        console.log(err)
      }
    },
    shanchu() {
      this.tableData = []
      this.$message.success('删除成功')
    },
    // 查询
    async chaxun() {
      const { data } = await getAnnouncement(this.reulst)
      // console.log(data)
      this.tableData = data
      this.reulst = {
        pageIndex: 1,
        pageSize: 10,
        communityId: [],
        type: '',
        showType: ''
        // keyWords: ''
      }
    },
    // 楼盘
    async loupanxin() {
      const { data } = await loupanxin()
      this.loupan = data
      // console.log(data)
    },
    // 修改
    xiugai(row) {
      this.showDialog = true
      this.formData = {
        name: row.name,
        title: row.title,
        imageUrl: row.imageUrl,
        showType: row.showType,
        pushStatus: row.pushStatus,
        type: row.type,
        linkUrl: row.linkUrl
      }
      // this.tableData = this.formData
    }
  }
}
</script>

<style >
.no{
  margin-top: 20px;
}
.kehudua{
    color: skyblue;
    font-size: 20px;
    line-height: 50px;
}
.cell{
 /* display: flex; */
 /* justify-content: center; */
 margin: 0 auto;
 text-align: center;
}
.yes1{
    background-color: #fab6b6;
    color: #fff;
}
.yes2{
    background-color: #85ce61;
    color: #fff;
}
.dingding{
  text-align: center;

}
.box{
 padding: 20px!important;
 background-color: #fefefe !important;
 /* border: 2px solid pink ; */
 /* box-sizing:border-box !important; */
 /* height: 100%; */
 width: 100%;
}
.el-header, .el-footer {
    /* background-color: #fff; */
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    text-align: center;
    /* line-height: 160px; */
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .button{
  display: flex;
  /* padding: 10px; */
  /* justify-content: center; */
  align-items: center;
  }

span{
  margin-left: 5px;
  text-align: center;
  margin: 0 10px;
}
.yes{
  border: 1px solid #e4e7ed;
}
</style>
